
﻿@{
    Layout = null; 
}
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一级机构管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入Element Plus -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div id="app">
        <span>
            您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--I级机构设置
        </span><p></p>
        <button style="float:right" v-on:click="addFirstKind">添加</button>

        <!-- 表格内容 -->
        <el-table :data="tableData" style="width: 100%">
            <!-- 表格列 -->
            <el-table-column prop="firstKindId" label="I级机构编号" style="color: aquamarine;"></el-table-column>
            <el-table-column prop="firstKindName" label="I级机构名称" style="color: aquamarine;"></el-table-column>
            <el-table-column prop="firstKindSalaryId" label="薪酬发放责任人编号" style="color: aquamarine;"></el-table-column>
            <el-table-column prop="firstKindSaleId" label="销售责任人编号" style="color: aquamarine;"></el-table-column>
            <el-table-column label="操作">
                <!-- 自定义操作列 -->
                <template #default="{row}">
                    <el-button link type="primary" size="small" v-on:click="upshow(row)">变更</el-button>
                    <el-button link type="primary" size="small" v-on:click="deleteClick(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加" v-model="showModal" width="460px">
            <span>
                <el-form :model="formData" ref="addForm" label-width="110px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="I级机构编号" prop="firstKindId">
                                <el-input v-model="formData.firstKindId" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="I级机构名称" prop="firstKindName">
                                <el-input v-model="formData.firstKindName" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="">
                            <el-form-item label="薪酬责任人编号" prop="firstKindSalaryId">
                                <el-input v-model="formData.firstKindSalaryId" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="销售责任人编号" prop="firstKindSaleId">
                                <el-input v-model="formData.firstKindSaleId" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item>
                                    <el-button type="primary" v-on:click="submitForm()">添加</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item>
                                    <el-button v-on:click="cz()">重置</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                </el-form>
            </span>
        </el-dialog>

        <el-dialog title="修改" v-model="upvis" width="460px">
            <span>
                <el-form :model="up" ref="upForm" label-width="110px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="I级机构编号" prop="firstKindId">
                                <el-input v-model="up.firstKindId" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="I级机构名称" prop="firstKindName">
                                <el-input v-model="up.firstKindName" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="">
                            <el-form-item label="薪酬责任人编号" prop="firstKindSalaryId">
                                <el-input v-model="up.firstKindSalaryId" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="销售责任人编号" prop="firstKindSaleId">
                                <el-input v-model="up.firstKindSaleId" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item>
                                    <el-button type="primary" v-on:click="upcffk()">修改</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item>
                                    <el-button v-on:click="cz()">重置</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                </el-form>
            </span>
        </el-dialog>

    </div>


    <script>
        const app = Vue.createApp({
            data() {
                return {
                   
                    showModal: false,
                    upvis: false,
                    formData: {

                        firstKindId: '',
                        firstKindName: '',
                        firstKindSalaryId: '',
                        firstKindSaleId: ''
                    },
                    up: {
                        ffkId: 0,
                        firstKindId: 0,
                        firstKindName: '',
                        firstKindSalaryId: 0,
                        firstKindSaleId: 0
                    },
                    rules: {
                        firstKindId: [
                            { required: true, message: '请输入I级机构编号', trigger: 'blur' }
                        ],
                        firstKindName: [
                            { required: true, message: '请输入I级机构名称', trigger: 'blur' }
                        ]
                    },
                    tableData: []
                };
            },
            methods: {
                addFirstKind() {
                    
                    this.showModal = true;
                },
                upshow(row) {
                    this.up.ffkId = row.ffkId;
                    this.up.firstKindId = row.firstKindId;
                    this.up.firstKindName = row.firstKindName;
                    this.up.firstKindSalaryId = row.firstKindSalaryId;
                    this.up.firstKindSaleId = row.firstKindSaleId;
                    this.upvis = true;
                },
                upcffk() {
                    const vm = this;
                    axios.post("/Home/updateCFFK?FfkId=" + this.up.ffkId + "&FirstKindId=" + this.up.firstKindId + "&FirstKindName=" + this.up.firstKindName + "&FirstKindSalaryId=" + this.up.firstKindSalaryId + "&FirstKindSaleId=" + this.up.firstKindSaleId)
                        .then(function (response) {
                            console.log(response)
                            if (response.data === true) {
                                vm.upvis = false;
                                vm.fetchData();
                                alert("修改成功");
                            } else {
                                alert("修改失败");
                            }
                        })
                        .catch(function (error) {
                            console.error(error);
                            alert("请求失败");
                        });
                },
                submitForm() {//添加
                    const vm = this;
                    axios.get("/Home/AddCFKK?FirstKindId=" + this.formData.firstKindId + "&FirstKindName=" + this.formData.firstKindName + "&FirstKindSalaryId=" + this.formData.firstKindSalaryId + "&FirstKindSaleId=" + this.formData.firstKindSaleId)
                        .then(function (response) {
                            if (response.data){
                                vm.formData.firstKindId ="";
                                vm.formData.firstKindName = "";
                                vm.formData.firstKindSalaryId ="";
                                vm.formData.firstKindSaleId = "";
                                vm.showModal = false;
                                vm.fetchData();//刷新数据
                                alert("添加成功");
                            } else {
                                alert("添加失败");
                            }
                        })
                        .catch(function (error) {
                            console.error(error);
                            alert("请求失败");
                        });
                },
                cz() {//添加重置
                    this.formData.firstKindId = "";
                    this.formData.firstKindName = "";
                    this.formData.firstKindSalaryId = "";
                    this.formData.firstKindSaleId = "";
                    this.up.firstKindId = 0;
                    this.up.firstKindName = "";
                    this.up.firstKindSalaryId = 0;
                    this.up.firstKindSaleId = 0;
                },
                fetchData() {
                    try {
                        const vm = this;
                        axios.get("/Home/getCFFK")
                            .then(function (response) {
                                vm.tableData = response.data;
                            })
                            .catch(function (error) {
                                console.error(error);
                            });
                    } catch (error) {
                        console.error(error);
                    }
                },

                deleteClick(row) {
                    if (confirm("确认删除吗?")) {
                        const vm = this;
                        axios.get("/Home/DeleteCFFK?FfkId=" + row.ffkId)
                            .then(function (response) {
                                if (response.data) {
                                    vm.fetchData();
                                    alert("删除成功");
                                } else {
                                    alert("删除失败");
                                }
                            })
                            .catch(function (error) {
                                console.error(error);
                                alert("请求失败");
                            });
                    }
                   
                }
            },
            mounted() {
                this.fetchData();
            }
        });
        // 安装 Element Plus
        app.use(ElementPlus);

        // 挂载应用程序到页面上
        app.mount("#app");
    </script>
</body>
